<template>
	<view class="card">
		<u-collapse>
			<u-collapse-item
				:title="item.head + ':' + (form.qrcode || '')"
				v-for="(item, index) in itemList"
				:key="index"
				:open="isOpen"
				@change="change">
				<u-form :model="form" ref="uForm">
					<u-form-item label="产品类别" required :label-width="labelWidth" prop="cname" :border-bottom="false">
						<u-select
							v-model="showType"
							mode="single-column"
							:list="typelist"
							label-name="title"
							value-name="id"
							@confirm="confirmType">
						</u-select>
						<u-input v-model="form.cname" type="select" @click="showType = true" />
					</u-form-item>
					
					<u-form-item label="产品名称" required :label-width="labelWidth" prop="title" :border-bottom="false">
						<view class="customFormItem">
							<view class="input">
								<u-input v-model="form.title"/>
							</view>
							<view class="icon" @tap="showGoodsSelect">
								<u-icon name="arrow-down-fill" color="#c0c4cc" size="28"></u-icon>
							</view>
						</view>
						<u-select
							v-model="isGoodsSelect"
							mode="single-column"
							:list="goodsList"
							label-name="title"
							value-name="id"
							@confirm="confirmGoodsSelect">
						</u-select>
					</u-form-item>
					
					<u-form-item label="规格型号" required :label-width="labelWidth" prop="specTitle" :border-bottom="false">
						<view class="customFormItem">
							<view class="input">
						<u-input v-model="form.specTitle"/>
						</view>
							<view class="icon" @tap="showOptionSelect">
								<u-icon name="arrow-down-fill" color="#c0c4cc" size="28"></u-icon>
							</view>
						</view>
						<u-select
							v-model="isOptionSelect"
							mode="single-column"
							:list="optionList"
							label-name="title"
							value-name="id"
							@confirm="confirmOptionSelect">
						</u-select>
					</u-form-item>
					
					<u-form-item label="单价/积分" required :label-width="labelWidth" prop="price" :border-bottom="false">
						<u-input v-model="form.price"/>
					</u-form-item>
					
					<u-form-item label="入库时间" required :label-width="labelWidth" prop="storageTime" :border-bottom="false">		
						<u-picker v-model="showDate" type="storageTime" @confirm="confirmDate"></u-picker>
						<u-input v-model="form.storageTime" type="select" @click="showDate = true" placeholder="请选择入库时间" />
					</u-form-item>
					
					<u-form-item label="备注一" :label-width="labelWidth" prop="remark1" :border-bottom="false">
						<u-input v-model="form.remark1"/>
					</u-form-item>
					
					<u-form-item label="备注二" :label-width="labelWidth" prop="remark2" :border-bottom="false">
						<u-input v-model="form.remark2"/>
					</u-form-item>
				</u-form>
				<view class="but-wrap">
					<button class="u-reset-button save-btn" @tap="confirmSave">确定</button>
				</view>
			</u-collapse-item>
		</u-collapse>		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isOpen: false, // 折叠项打开状态
				itemList: [{
					head: "产品资料",
					body: '',
					open: true,
					disabled: true
				}],
				isGoodsSelect: false,// 产品选择
				goodsList: [], // 产品列表
				isOptionSelect: false,// 产品规格选择
				optionList: [], // 产品规格列表
				labelWidth: 160,
				showDate: false,
				showType: false,
				typelist: [],// 产品类别列表
				list: [],
				itemStyle: {
					borderBottom: '1rpx solid rgba(33, 32, 30, 0.05)',
					paddingBottom: '20rpx'
				},
			}
		},
		props: {
			item: {
				type: Object,
				default: ()=> {
					return {}
				}
			}
		},
		computed: {
			form: {
				get() {
					return this.item;
				}
			}
		},
		created() {
			this.getCategory();
		},
		methods: {
			change(e){
				this.isOpen = e.show;
				this.$emit('handleClose', !e.show);
			},
			// 商品分类
			getCategory(){
				let that = this;
				that.$http('goods.getCategory', {pid: 0}).then(res => {
					if(res.code === 1) {
						that.typelist = res.data;
					}
				});
			},
			// 确认产品类别选择
			confirmType(e){
				this.form.cname = e[0].label
				this.form.cid = e[0].value
			},
			
			// 获取产品列表
			getGoods(){
				let that = this;
				that.$http('goods.lists', {
					cid: that.form.cid,
					title: that.form.title
				}).then(res => {
					if(res.code === 1){
						if(res.data.length > 0){
							that.goodsList = res.data;
							this.isGoodsSelect = !this.isGoodsSelect;
						}else {
							return that.$u.toast('该类别未找到相关产品，请重新输入产品名称');
						}
					}
				})
			},
			// 产品选择
			showGoodsSelect(e){
				/* if(this.form.cid && this.form.title){
					return this.$u.toast('请先选择产品类别')
				} */
				if(!this.form.cid){
					return this.$u.toast('请先选择产品类别');
				}if(!this.form.title){
					return this.$u.toast('请先输入产品名称');
				}
				this.getGoods();
			},
			// 确认产品选择
			confirmGoodsSelect(e){
				this.form.title = e[0].label
				this.form.goodsId = e[0].value
			},
			
			
			
			// 获取产品规格
			getOption(){
				let that = this;
				that.$http('goods.option', {
					id: that.form.goodsId
				}).then(res => {
					if(res.code === 1){
						if(res.data.length > 0){
							that.optionList = res.data.map(item => ({
							  ...item,
							  extra: item.price // 自定义属性 单价/积分
							}));
							this.isOptionSelect = !this.isOptionSelect;
						}else {
							return that.$u.toast('未找到该产品规格');
						}
					}
				})
			},
			// 产品规格选择
			showOptionSelect(e){
				if(!this.form.goodsId){
					return this.$u.toast('请先选择产品');
				}
				this.getOption();
			},
			// 确认产品规格选择
			confirmOptionSelect(e){
				this.form.specTitle = e[0].label
				this.form.specId = e[0].value
				this.form.price = e[0].extra // 单价/积分
			},
			
			// 确认产品入库时间选择
			confirmDate(e){
				this.form.storageTime = e.year + '-' + e.month + '-' + e.day
			},
			confirmSave(){
				if(!this.form.cid){
					return this.$u.toast('请选择产品类别');
				}
				if(!this.form.title){
					return this.$u.toast('请输入产品名称');
				}
				if(!this.form.specId){
					return this.$u.toast('请输入产品规格型号');
				}
				if(!this.form.price){
					return this.$u.toast('请输入单价/积分');
				}
				if(!this.form.storageTime){
					return this.$u.toast('请选择入库时间');
				}
				this.isOpen = false;
				this.$emit('handleClose', true);
				this.$emit('updateDataArr', this.form);
			},
		},
	}
</script>

<style lang="scss">
	.card {
		margin: 0;
		padding-top: 0;
		padding-bottom: 0;
		box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .08);
	}
	.customFormItem {
		width: 100%;
		display:flex;
		align-items: center;
		justify-content: space-between;
		.input {
			width: calc(100% - 60rpx);
		}
		.icon {
			width: 30rpx;
		}
	}
	.but-wrap {
		padding: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		.save-btn {
			width: 200rpx;
			line-height: 70rpx;
			background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
			box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
			border-radius: 35rpx;
			padding: 0;
			margin: 0;
			color: rgba(#fff, 0.9);
		}
	}
</style>